<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue.global.js"></script>
  <link rel="stylesheet" href="./index.css" />
  <link rel="stylesheet" href="./table.css" />
  <link rel="stylesheet" href="./gongzi.css" />
  <script src="./index.full.js"></script>

  <script>
    //适配代码
    (function (doc, win) {
      var docEI = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientataionchange' : 'resize',
        recalc = function () {
          var clientWidth = docEI.clientWidth;
          if (!clientWidth) return;
          //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
          docEI.style.fontSize = 100 * (clientWidth / 1536) + 'px';
        }

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  </script>
</head>

<body>
  <div id="app">
    <div class="container">
      <div class="top-num-box">编号 DW1-2024-03-011</div>
      <div class="top-content">
        <h2 class="top-title">劳 务 用 工 合 同 书</h2>
        <div class="top-text" style="margin-bottom: 0.5rem;"><span>甲 方</span>
          <el-input v-model="topForm.jName" class="top-input" placeholder=" "></el-input>
        </div>
        <div class="top-text"><span>乙 方</span>
          <el-input v-model="topForm.yName" class="top-input" placeholder=" "></el-input>
        </div>
        <div class="top-comp">
          <div class="t-c-left">
            <div class="t-c-item">
              <span>甲方</span>
            </div>
            <div class="t-c-item">
              <span>法人代表：</span>
              <el-input v-model="topForm.jName1" class="" placeholder=" "></el-input>
            </div>
            <div class="t-c-item">
              <span>或委托代理人：</span>
              <el-input v-model="topForm.jAgent" class="" placeholder=" "></el-input>
            </div>
            <div class="t-c-item">
              <span>联系方式：</span>
              <el-input v-model="topForm.jPhone" class="" placeholder=" "></el-input>
            </div>
          </div>
          <div class="t-c-right">
            <div class="t-c-item">
              <span>乙方</span>
            </div>
            <div class="t-c-item">
              <span>姓名：</span>
              <el-input v-model="topForm.yName1" class="" placeholder=" "></el-input>
            </div>
            <div class="t-c-item">
              <span>身份证号码：</span>
              <el-input v-model="topForm.yIdCard" class="" placeholder=" "></el-input>
            </div>
            <div class="t-c-item">
              <span>联系方式：</span>
              <el-input v-model="topForm.yPhone" class="" placeholder=" "></el-input>
            </div>
          </div>
        </div>
        <div class="sign-box">
          <span>签订日期：</span>
          <el-input v-model="topForm.year" class="sign-box-input" placeholder=" "></el-input> 年
          <el-input v-model="topForm.month" class="sign-box-input" placeholder=" "></el-input> 月
          <el-input v-model="topForm.day" class="sign-box-input" placeholder=" "></el-input> 日
        </div>
      </div>

      <div class="table-content" style="text-align: left;margin-top: 1rem;">
        <div class="danger-info">
          根据《中华人民共和国劳动法》和《中华人民共和国劳动合同法》有关规定，甲乙双方经平等协商一致，自愿签订本合同，共同遵守合同所列条款。
        </div>
        <h3>一、劳务合同期限<span class="con-desc">（甲乙双方选择适用）</span></h3>
        <div class="danger-info">1、有固定期限劳务合同</div>
        <div class="danger-info">本合同于
          <el-input v-model="contentForm.year1" class="w6" placeholder=" "></el-input> 年
          <el-input v-model="contentForm.month1" class="w5" placeholder=" "></el-input> 月
          <el-input v-model="contentForm.day1" class="w5" placeholder=" "></el-input> 日生效，于
          <el-input v-model="contentForm.year2" class="w6" placeholder=" "></el-input> 年
          <el-input v-model="contentForm.month2" class="w5" placeholder=" "></el-input> 月
          <el-input v-model="contentForm.day2" class="w5" placeholder=" "></el-input> 日终止。
        </div>
        <div class="danger-info">2、无固定期限劳务合同</div>
        <div class="danger-info">本合同生效日期为
          <el-input v-model="contentForm.year3" class="w6" placeholder=" "></el-input> 年
          <el-input v-model="contentForm.month3" class="w5" placeholder=" "></el-input> 月
          <el-input v-model="contentForm.day3" class="w5" placeholder=" "></el-input> 日起。
        </div>

        <h3>二、工作内容和要求</h3>
        <div class="danger-info">
          1、甲方招用乙方在<el-input v-model="contentForm.projectName" class="inputBorBot w30"
            placeholder=" "></el-input>（工程名称）工程中担任<el-input v-model="contentForm.workType" class="inputBorBot w10"
            placeholder=" "></el-input>岗位（工种）工作。因工作需要，甲乙双方协商一致，可以变更岗位（工种）以及工作地点。
        </div>
        <div class="danger-info">2、乙方应按照甲方的要求，按时完成规定的工作任务，达到规定的质量标准。</div>

        <h3>三、劳动保护和劳动条件</h3>
        <div class="danger-info">
          1、甲方对乙方的工作时间安排必须执行国家规定的工时制度。甲方由于生产经营需要，经乙方同意后，可安排乙方加班，但不得违反国家有关规定，且应合理安排职工补休或按照《中华人民共和国劳动法》的有关规定依法支付加班、延长工作时间工资报酬。
        </div>
        <div class="danger-info">
          2、甲方应当在乙方进入施工现场前对乙方进行入场施工安全教育。甲方应当对已取得电工、焊工、登高作业及特殊工种操作证书的乙方进行岗位前培训（或书面交底）后，方可上岗作业。
        </div>
        <div class="danger-info">
          3、甲方根据生产岗位的需要，按照国家劳动安全、卫生的有关规定，为乙方配备必要的安全防护措施，发放必要的劳动保护用品。
        </div>
        <div class="danger-info">
          4、甲方根据国家有关法律法规，依法建立安全生产制度，乙方应当严格遵守甲方的劳动安全制度，严禁违章作业，防止劳动过程中的事故，减少职业危害。
        </div>

        <h3>四、工资及福利待遇</h3>
        <div class="danger-info">
          1、甲方每月支付乙方劳务报酬标准为<el-input v-model="contentForm.price1" class="inputBorBot w10"
            placeholder=" "></el-input>元/天(根据每月考勤情况进行发放),同时规定加班工资为<el-input v-model="contentForm.price2"
            class="inputBorBot w10" placeholder=" "></el-input>元/小时（或班）。
        </div>
        <div class="danger-info">
          2、甲乙双方约定由银行直接转账乙方银行卡支付工资，甲方应每月及时向乙方个人发放工资，工资发放记录应由乙方亲笔签字后按手印确认。考虑到甲方承担工程施工结算的滞后性，若因甲方资金周转原因，经甲、乙双方协商同意后，在劳务用工合同未终止或解除的情况下可暂缓乙方部分工资发放，但滞后工资最长时间限乙方签字确认后30天内。
        </div>
        <div class="danger-info">
          乙方个人所得税由甲乙双方根据相关法律法规确定扣缴义务人，相关义务及费用均由甲乙双方承担，与项目部无关。经乙方签印的工资发放表中实发金额为乙方当期应得全部金额，真实准确并足额支付。
        </div>
        <div class="danger-info">
          3、3、甲方应在劳务用工合同终止、解除时一次性付清乙方工资。乙方在接收剩余工资前应向甲方签署《农民工退场确认书》，若因乙方原因未向甲方提供《农民工退场确认书》或无正当理由拒绝在《农民工退场确认书》上签字确认，甲方有权暂缓乙方剩余工资的支付。
        </div>

        <h3>五、劳动纪律和劳务用工合同的变更、解除、终止、续订</h3>
        <div class="danger-info">
          1、乙方应严格遵守甲方的各项制度、劳动纪律和安全技术操作规程。因乙方违反甲方相关规定或不服从甲方管理造成的损失，甲方有权根据调查结果给予乙方相应经济处罚，情节严重的甲方有权单方面解除合同
        </div>
        <div class="danger-info">
          2、乙方有下列情形之一的，甲方可以单方解除本合同：
        </div>
        <div class="danger-info">
          （1）被证明不符合录用条件的；
        </div>
        <div class="danger-info">
          （2）有打架斗殴、偷窃、赌博等违法、违纪行为的；
        </div>
        <div class="danger-info">
          （3）严重失职、营私舞弊，对甲方造成重大损害的；
        </div>
        <div class="danger-info">
          （4）严重违反甲方安全管理规定和甲方劳动纪律的；
        </div>
        <div class="danger-info">
          （5）劳动者同时与其他用人单位建立劳动关系，对完成本单位的工作任务造成严重影响，或者经甲方提出，拒不改正的；
        </div>
        <div class="danger-info">
          （6）被依法追究刑事责任的；
        </div>
        <div class="danger-info">
          （7）体检结果不适宜从事本工程施工作业的。
        </div>
        <div class="danger-info">
          3、有下列情形之一的，乙方可以单方解除本合同
        </div>
        <div class="danger-info">
          （1）未按照劳务用工合同约定提供劳动保护或者劳动条件的；
        </div>
        <div class="danger-info">
          （2）未及时足额支付劳动报酬的，双方协商同意暂缓支付情况的除外；
        </div>
        <div class="danger-info">
          （3）用人单位的规章制度违反法律、法规的规定，损害劳动者利益的；
        </div>
        <div class="danger-info">
          （4）因劳动合同法第二十六条第一款规定的情形致使劳务用工合同无效的；
        </div>
        <div class="danger-info">
          （5）甲方以暴力、威胁、监禁、或者非法限制人身自由的手段强迫劳动的；或者用人单位违章指挥、强令冒险作业危及劳动者人身安全的；
        </div>
        <div class="danger-info">
          （6）法律、行政法规规定劳动者可以解除劳务用工合同的其他情形的。
        </div>
        <div class="danger-info">
          4、甲方负责在乙方进场后一个月以内为乙方安排体检，乙方应予配合。若体检结果证明乙方有以下疾病不适合从事本工程施工作业时，甲方有权在支付乙方应付工资后单方面解除合同，此行为不视为甲方违约，乙方不得以此追究甲方违约责任。
        </div>
        <div class="danger-info">
          （1）办公人员：高血压、心脏病、癫痫、尘肺病、恐高症、晕动（眩晕）症等职业禁忌疾病；
        </div>
        <div class="danger-info">
          （2）食堂工作人员：呼吸道传染病（肺结核）、肠道传染病（伤寒、痢疾等）、各型肝炎（甲肝、乙肝等）以及其他各种易通过血液、体液、接触传播的疾病。
        </div>

        <h3>六、违约责任、劳动争议处理及其它</h3>
        <div class="danger-info">
          1、甲方违反本合同约定条件解除合同或由于甲方原因订立的无效劳务用工合同，给乙方造成损害的，应按照国家规定承担赔偿责任。
        </div>
        <div class="danger-info">
          2、乙方违反本合同约定的条件解除劳务用工合同，对甲方造成经济损失的，应赔偿给甲方造成的经济损失。
        </div>
        <div class="danger-info">
          3、双方因履行本合同发生争议,当事人可以向甲方劳动争议调解委员会申请调解;调解不成的,应当自劳动争议发生之日起60日内向劳动争议仲裁委员会申请仲裁。当事人一方也可以直接向 工程所在地 劳动争议仲裁委员会申请仲裁。
        </div>
        <div class="danger-info">
          4、本合同签订前甲方已向乙方详细介绍本工程施工特点、作业环境、管理要求及本合同条款中涉及乙方权利义务的相关要点，乙方已理解并同意本合同条款内容。
        </div>
        <div class="danger-info">
          5、如发生紧急情况时甲方会联系乙方近亲属（即：紧急联系人），因紧急联系人联系信息有误或发生变动后乙方未通知甲方的，由乙方自行承担责任。
        </div>
        <div class="danger-info">
          紧急联系人：姓名<el-input v-model="contentForm.jName" class="inputBorBot w10" placeholder=" "></el-input>
          ，与本人关系<el-input v-model="contentForm.jRelation" class="inputBorBot w10" placeholder=" "></el-input>
          ，联系地址<el-input v-model="contentForm.jAddress" class="inputBorBot w30" placeholder=" "></el-input>
          ，联系电话<el-input v-model="contentForm.jPhone" class="inputBorBot w20" placeholder=" "></el-input>。
        </div>
        <div class="danger-info">
          6、本合同未尽事宜或与国家颁布的劳动法律、法规、规章不符的，按照有关规定执行。
        </div>
        <div class="danger-info">
          7、本合同一式叁份，甲、乙双方各执壹份，项目部留存一份，每份均具有相同效力。本合同自双方签字盖章（按手印）后生效。
        </div>
        <div class="danger-info">
          8、双方约定的其他事项 <el-input v-model="contentForm.otherCon" class="inputBorBot w10" placeholder=" "></el-input> 。
        </div>

        <div class="top-comp" style="justify-content: space-between;padding: 0 0.2rem;letter-spacing: 0.05rem">
          <div class="t-c-left">
            <div class="t-c-item">
              <span>甲方：（公章）</span>
            </div>
            <div class="t-c-item">
              <span>法定代表：</span>
              <el-input v-model="contentForm.jName1" class="" placeholder=" "></el-input>
            </div>
            <div class="t-c-item">
              <span>或委托代理人：</span>
              <el-input v-model="contentForm.jAgent" class="" placeholder=" "></el-input>
            </div>
          </div>
          <div class="t-c-right" style="margin-right: 0.3rem;">
            <div class="t-c-item">
              <span>乙方：（签印）</span>
              <el-input v-model="contentForm.yName" class="" placeholder=" "></el-input>
            </div>
          </div>
        </div>
        <div class="b_flex" style="letter-spacing: 0.05rem">
          <div>
            签订日期：
            <el-input v-model="contentForm.year4" class="w6" placeholder=" "></el-input> 年
            <el-input v-model="contentForm.month4" class="w5" placeholder=" "></el-input> 月
            <el-input v-model="contentForm.day4" class="w5" placeholder=" "></el-input> 日
          </div>
          <div>
            签订日期：
            <el-input v-model="contentForm.year5" class="w6" placeholder=" "></el-input> 年
            <el-input v-model="contentForm.month5" class="w5" placeholder=" "></el-input> 月
            <el-input v-model="contentForm.day5" class="w5" placeholder=" "></el-input> 日
          </div>
        </div>

      </div>
    </div>
  </div>

  </div>
  <script>
    const {
      createApp,
      reactive,
      toRefs
    } = Vue;
    const vue3Composition = {
      setup() {
        const topForm = reactive({
          JName: '',
          YName: '',
          JName1: '',
          jAgent: '',
          jPhone: '',
          YName1: '',
          yIdCard: '',
          yPhone: '',
          year: '',
          month: '',
          day: '',
        })

        const contentForm = ref({
          year1: "",
          month1: "",
          day1: "",
          year2: "",
          month2: "",
          day2: "",
          year3: "",
          month3: "",
          day3: "",
          projectName: "",
          workType: "",
          price1: "",
          price2: "",
          jName: "",
          jRelation: "",
          jAddress: "",
          jPhone: "",
          otherCon: "无",
          jAgent: "",
          yName: "",
          year4: "",
          month4: "",
          day4: "",
          year5: "",
          month5: "",
          day5: "",
          jName1: ""
        })


        // const dataRef = toRefs(topForm);

        return {
          topForm,
          contentForm,
        }
      }

    }
    const app = createApp(vue3Composition).use(ElementPlus).mount('#app');
  </script>
</body>
<style>
  * {
    /* margin: 0;
    padding: 0; */
    font-size: 0.15rem;
  }

  .top-content {
    text-align: center;
  }

  .top-img {
    display: block;
    width: 1.5rem;
    margin: auto;
  }

  .top-title {
    font-size: 0.35rem;
    word-spacing: 10px;
    margin: 1rem 0 1.2rem 0;
  }

  .top-text {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .top-input {
    width: 4.1rem;
  }

  .top-input .el-input__wrapper {
    box-shadow: none;
    border-bottom: 1px solid #333;
    border-radius: 0;
    text-align: center;
  }

  .top-input .el-input__inner {
    text-align: center;
  }

  .top-text span {
    display: inline-block;
    font-size: 0.22rem;
    width: 1rem;
    /* text-align: justify;
    text-align-last: justify; */
  }

  .top-company {
    font-size: 0.2rem;
    word-spacing: 10px;
  }

  .top-num-box {
    width: 60%;
    margin: 0 auto;
    font-size: 0.2rem;
  }

  .top-comp {
    display: flex;
    justify-content: center;
    margin: 0.8rem 0 0.4rem 0;
  }

  .t-c-left {
    box-sizing: border-box;
    padding-right: 0.1rem;
  }

  .t-c-right {
    box-sizing: border-box;
    padding-left: 0.1rem;
  }

  .t-c-item {
    width: 2.8rem;
    font-size: 0.18rem;
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
  }

  .t-c-left .t-c-item>span {
    flex: 1 0 auto;
    text-align: left;
  }

  .t-c-right>.t-c-item>span {
    flex: 1 0 auto;
    text-align: left;
  }

  .sign-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.8rem auto 0 auto;
  }

  .sign-box-input {
    width: 0.6rem;
  }

  .con-desc {
    font-weight: lighter;
  }
  .b_flex{
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
  }
</style>

</html>
